<template>
  <!-- 包含卡片的列表组件 -->
  <div>
    <el-row :gutter="20">
      <el-col
        :span="8"
        :offset="index % 2 === 0 ? 4 : 0"
        class="my-card-position"
        v-for="(item, index) in paginatedList"
        :key="index"
      >
        <!-- 将 currentPage 和 pageSize 作为 props 传递给 KnowledgeCard -->
        <KnowledgeCard
          :current-page="currentPage"
          :page-size="pageSize"
          :knowledge="item"
        ></KnowledgeCard>
      </el-col>
      <el-col :span="8" :offset="8">
        <!-- 监听 MyPagination 组件的自定义事件，更新当前页和每页条数 -->
        <MyPagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total"
        ></MyPagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import KnowledgeCard from "@/components/knowledge/KnowledgeCard.vue";
import MyPagination from "@/components/knowledge/MyPagination.vue";

export default {
  name: "KnowledgeList",
  components: {
    KnowledgeCard,
    MyPagination,
  },
  props: ["carouselList", "total"],

  data() {
    return {
      currentPage: 1,
      pageSize: 4,
    };
  },
  created() {},
  computed: {
    paginatedList() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      return this.carouselList.slice(startIndex, startIndex + this.pageSize);
    },
  },
  methods: {
    handleSizeChange(val) {
      // 处理分页大小变化，更新 data 中的 pageSize
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // 处理当前页变化，更新 data 中的 currentPage
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.my-card-position {
  margin-top: 10px;
}
</style>
